<script setup lang="ts">
import { ref } from 'vue'

const content = ref('')
const emit = defineEmits(['addTodo'])
const enterFn = () => {
  // 非空判断
  if (!content.value) return alert('不能发布空任务')
  // 触发父组件自定义事件
  emit('addTodo', content.value)
  // 发布后清空
  content.value = ''
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model="content"
      @keyup.enter="enterFn"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>
